import React, { useState } from 'react';
import { Form, Input, Tree } from 'antd';

type RoleInfo = {
    menus: string[];
    _id: string;
    name: string;
    create_time: number;
    __v: 0;
};
type Props = {
    role: Partial<RoleInfo>;
    authRef: React.MutableRefObject<(() => React.Key[]) | null>;
};

type FormItemLayout = {
    labelCol: {
        sm: { span: number };
    };
    wrapperCol: {
        sm: { span: number };
    };
};

const formItemLayout: FormItemLayout = {
    labelCol: {
        sm: { span: 4 }
    },
    wrapperCol: {
        sm: { span: 19 }
    }
};

const treeData = [
    {
        title: '平台权限',
        key: 'auth',
        children: [
            {
                title: '首页', // 菜单标题名称
                key: '/home', // 对应的path
                isPublic: true, // 公开的
            },
            {
                title: '商品',
                key: '/products',
                children: [ // 子菜单列表
                    {
                        title: '品类管理',
                        key: '/category',
                    },
                    {
                        title: '商品管理',
                        key: '/product',
                    }
                ]
            },
            {
                title: '用户管理',
                key: '/user',
            },
            {
                title: '角色管理',
                key: '/role',
            },
            {
                title: '图形图表',
                key: '/charts',
                children: [
                    {
                        title: '柱形图',
                        key: '/charts/bar',
                    },
                    {
                        title: '折线图',
                        key: '/charts/line',
                    },
                    {
                        title: '饼图',
                        key: '/charts/pie',
                    }
                ]
            }
        ]
    }
];

// 认证form组件
const AuthForm: React.FC<Props> = ({ role, authRef }) => {
    const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(role.menus ?? []);
    const onCheck = (checkedKeysValue: any): void => {
        console.log('onCheck', checkedKeysValue);
        setCheckedKeys(checkedKeysValue);
    };
    const getCheckedKeys = (): React.Key[] => checkedKeys;
    authRef.current = getCheckedKeys;
    return (
        <Form {...formItemLayout}>
            <Form.Item label="角色名称">
                <Input type="text" value={role.name} disabled />
            </Form.Item>
            <Tree
                defaultExpandAll
                checkable
                onCheck={onCheck}
                checkedKeys={checkedKeys}
                treeData={treeData}
            />
        </Form>
    );
};

export default AuthForm;